<template>
  <div class="content bg-white">
    <div class="head-top">
      <dc-header :page-to="'/olregister'" :title="'在线登记'"></dc-header>
      <button class="goback" @click="goback"></button>
      <div class="textabovefrom">如果您对龙决策产品感兴趣，请在下方登记企业信息，我们将第一时间为您提供咨询服务。</div>
      <div class="pl30 pr30">
        <inputItem placeholder="请输入" type="text"
                   class="mt30"
                   iconName="icon-register-name"
                   v-model="yourname"
                   :maxLength = "15"
                   v-validate="{ rules: { required: false, max: 15 } }"
                   name="姓名"
                   label="您的姓名"
        />
        <inputItem placeholder="请输入" type="text"
                   class="mt30"
                   iconName="icon-register-phone"
                   v-model="contact"
                   :maxLength = "11"
                   v-validate="{ rules: { required: false,phone:true } }"
                   name="联系方式"
                   label="联系方式"
        />
        <inputItem placeholder="请输入" type="text"
                   class="mt30"
                   iconName="icon-register-cname"
                   v-model="companyname"
                   :maxLength = "15"
                   v-validate="{ rules: { required: false } }"
                   name="公司名称"
                   label="公司名称"
        />
        <inputSelect placeholder="请选择" type="text"
                     class="mt30"
                     iconName="icon-register-qiye"
                     v-validate="{ rules: { required: true } }"
                     name="企业形态"
                     label="企业形态"
                     :upscrolldata="companyType"
                     v-model="companyTypesend"
        />
        <inputSelect placeholder="请选择" type="text"
                     class="mt30"
                     iconName="icon-register-yetai"
                     v-validate="{ rules: { required: true } }"
                     name="所属业态"
                     label="所属业态"
                     :upscrolldata="busiType"
                     v-model="busiTypesend"
        />
        <mt-button class="mt50" size="large" type="primary" @click="submitform">提交</mt-button>
      </div>

      <mt-popup
        v-model="popupVisible"
        popup-transition="popup-fade"
        class="registpopup"
        :modal="false">
        <span class="bingoimg"><i class="iconfont icon-success green"></i></span>
        <p class="msg">信息提交成功</p>
        <div class="showtext">我们的工作人员会第一时间与您取得联系。感谢您对龙决策产品的青睐，期待与您进一步的合作！</div>
        <div class="pl30 pr30">
          <router-link to="" @click.native="gotoPlay">
            <mt-button class="mt50" size="large" type="primary">抢先体验一下</mt-button>
          </router-link>

        </div>
      </mt-popup>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import footer from '@/common/plugins/footer';
  import inputItem from '@/common/plugins/input/inputItem.vue';
  import inputSelect from '@/common/plugins/input/inputSelect.vue';
  import api from '../../common/api/regist';
  import mintUi from '../../common/mintUi';
  import {mapActions} from 'vuex';

  export default {
    data () {
      return {
        yourname: '',
        contact: '',
        companyname: '',
        busiTypesend: '',
        companyTypesend: '',
        rawbusiType: [],
        rawcompanyType: [],
        popupVisible: false
      };
    },
    computed: {
      busiType () {
        return this.rawbusiType.map((item, i) => {
          return {
            label: item.typeName,
            value: item.typeCode
          };
        });
      },
      companyType () {
        return this.rawcompanyType.map((item, i) => {
          return {
            label: item.typeName,
            value: item.typeCode
          };
        });
      }
    },
    components: {
      'dc-header': header,
      'dc-footer': footer,
      inputItem,
      inputSelect
    },
    methods: {
      ...mapActions({setStore: 'setStore', setPermission: 'setPermission'}),
      submitform () {
        this.$validator.validateAll().then((result) => {
          if (result) {
            api.registrationOnline({
              registrationName: this.yourname,
              registrationMobile: this.contact,
              companyName: this.companyname,
              companyType: this.companyTypesend,
              busiType: this.busiTypesend
            }).then(res => {
              this.popupVisible = true;
            });
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      },
      gotoPlay () {
        api.getPlay().then(res => {
          this.setPermission(res.permission);
          this.setStore(res.org);
          this.$router.push('/home');
        });
      },
      goback () { //好机智╭(╯^╰)╮
        if (!this.popupVisible) {
          this.$router.push('/bindingShop');
        } else {
          this.popupVisible = false;
        }
      }
    },
    created () {
      api.getCodetable({parentTypeCode: 'companyType'}).then(res => {
        this.rawcompanyType = res;
      });
      api.getCodetable({parentTypeCode: 'busiType'}).then(res => {
        this.rawbusiType = res;
      });
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .goback {
    position: fixed;
    top: 0;
    left: 0;
    width: px2rem(100px);
    height: px2rem(88px);
    background-color: transparent;
    border: none;
    z-index: 999;
  }

  .registpopup {
    margin-top: px2rem(88px);
    height: 100%;
    width: 100%;
  }

  .msg {
    margin-top: px2rem(20px);
    font-weight: bold;
    font-size: px2rem(40px);
  }

  .bingoimg {
    padding-top: px2rem(80px);
    display: block;
    i {
      font-size: px2rem(140px);
    }
  }

  .showtext {
    color: #666666;
    text-align: left;
    padding: 0 px2rem(50px) px2rem(80px) px2rem(50px);
    font-size: px2rem(25px);
  }
</style>
